<template>
  <div>
    <div class="">
      <van-image width="100%" height="160px" fit="cover" :src="carousel.img" />
    </div>
    <!-- 内容 -->
    <div class="p-20px">
      <!-- tabs -->
      <div
        class="w-full flex items-center justify-around bg-white rounded-5px text-12px h-75px"
      >
        <div class="w-30px" @click="router.push('/index/home/project')">
          <van-image
            width="30px"
            height="30px"
            fit="contain"
            :src="getImageurl('home/project.png')"
          />
          <span class="mt-4px">产品</span>
        </div>
        <div class="w-30px" @click="router.push('/index/home/book')">
          <van-image
            width="30px"
            height="30px"
            fit="contain"
            :src="getImageurl('home/book.png')"
          />
          <span class="mt-4px">证书</span>
        </div>
        <div class="w-30px" @click="router.push('/index/home/top')">
          <van-image
            width="30px"
            height="30px"
            fit="contain"
            :src="getImageurl('home/top.png')"
          />
          <span class="mt-4px">顶级</span>
        </div>
      </div>
      <div class="mt-20px flex h-104px">
        <div
          @click="router.push('/index/home/shop')"
          class="flex-1 mr-15px"
          :style="{
            'background-image': `url(${getImageurl('home/shop.png')}`,
            'background-size': 'contain',
          }"
        >
          <div class="ml-17px mt-30px">
            <div class="text-14px">{{ shop_name }}</div>
            <div class="mt-4px text-[#999999] text-12px">店铺</div>
          </div>
        </div>

        <div
          @click="router.push('/index/home/jielong')"
          class="flex-1"
          :style="{
            'background-image': `url(${getImageurl('home/reservation.png')}`,
            'background-size': 'contain',
          }"
        >
          <div class="ml-17px mt-30px">
            <div class="text-14px">订单预约</div>
            <div class="mt-4px text-[#999999] text-12px">订单预约详情</div>
          </div>
        </div>
      </div>
      <div class="mt-30px">
        <div class="text-14px mb-10px">证书展示</div>
        <div class="flex flex-wrap justify-between mb-40px">
          <div
            class="w-160px bg-white rounded-5px mb-20px"
            v-for="item in list"
          >
            <div>
              <van-image
                width="160px"
                height="154px"
                fit="cover"
                :src="item.image"
              />
            </div>
            <div class="my-10px text-10px ml-15px">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <van-popup v-model:show="showCenter" round class="p-20px">
    <div class="w-305px">
      <div class="mt-10px w-full text-center">{{ popupTitle }}</div>

      <div class="flex justify-between items-center mt-20px">
        <div
          @click="showCenter = false"
          class="w-124px h-36px flex justify-center items-center bg-[#FAF9F9] rounded-5px text-[#999999] text-12px"
        >
          取消
        </div>
        <div
          @click="router.push('/index/personal/bindingInformation')"
          class="w-124px h-36px flex justify-center items-center bg-[#2E95FF] rounded-5px text-12px text-[white]"
        >
          确认
        </div>
      </div>
    </div>
  </van-popup>
</template>
<script setup>
import getImageurl from "@/util/getImageurl";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/index";
import { Index, CheckInfo } from "@/util/api";
const store = useUserStore();
const showCenter = ref(false);
const router = useRouter();
const carousel = ref({});
const shop_name = ref("");
const list = ref([]);
const popupTitle = ref("");
const getData = async () => {
  const res = await Index();
  carousel.value = res.msg.carousel;
  shop_name.value = res.msg.shop_name;
  list.value = res.msg.goods;
  // console.log(res);
  const response = await CheckInfo();
  if (response.code == 0) {
    showCenter.value = true;
    popupTitle.value = response.msg;
  }
};
getData();
</script>
<style scoped lang="scss"></style>
